import React from 'react'
import './index.css'
export default function Footer({ setTodoList, todoList }) {
  // 清空所有已完成列表
  const deleteAllhandle = () => {
    const arr = todoList.filter(item =>!item.done)
    setTodoList(arr)
  }
  
  // 获取已完成的任务数量
  const alreadyPlayhandle = ()=>{
   const arr =  todoList.filter(item=>item.done)
    return arr.length
  }

  return (
    <div>
      <div className="todo-footer">
        <label>
          <input type="checkbox" />
        </label>
        <span>
          <span>已完成 {alreadyPlayhandle()}</span> / 全部{todoList.length}
        </span>
        <button className="btn btn-danger" onClick={deleteAllhandle}>清除已完成任务</button>
      </div>
    </div>
  )
}
